<template>
  <div class="cover like-all">
    <div class="like-title">
      <div class="like-title-flex">
        <a @click="$router.goBack()">返回</a>
        <span>我的收藏</span>
        <p @click="exit">{{ exitData }}</p>
      </div>
    </div>
    <ul class="like-list" :class="{'ul-margin':isExit}">
      <li v-for="(item,index) in likeList" :key="index">
        <label class="circle" v-show="isShow">
           <span>
             <input type="checkbox" :value="item.id" class="circle-input" v-model="checkName">
             <span class="circle-core"></span>
           </span>
        </label>
        <div class="like-user">
          <div class="user-logo"></div>
          <div class="user-name">
            <span>{{ item.name }}</span>
            <p>{{ item.time }}</p>
          </div>
        </div>
        <div class="user-title">
          <p class="bold">{{ item.title }}</p>
        </div>
        <div class="user-information">
          <p>{{ item.content }}</p>
        </div>
        <div class="user-source">
          <p>来源：{{ item.source }}</p>
        </div>
      </li>
    </ul>
    <div class="like-sort">
      <div @click="openSort">
        <i></i>
        <span>排序</span>
      </div>
    </div>
    <div class="like-exit" v-show="isShow">
      <div style="background-color: #3f7bff" @click="batchDelete">批量删除</div>
      <div style="background-color: #f37a04" @click="allDelete">全部删除</div>
    </div>
    <mt-actionsheet
      :actions="actions"
      v-model="sheetVisible">
    </mt-actionsheet>
  </div>
</template>

<script>
  import {MessageBox} from 'mint-ui';

  export default {
    name: "like",
    data() {
      return {
        sheetVisible: false,
        actions: [],
        isExit: false,
        isShow: false,
        exitData: '编辑',
        checkName: [],
        likeList: [{
          id: 111,
          name: '测试员1',
          time: '2018.05.03 11:34',
          title: '特朗普将被刻成冰雕，环保组织：气候变暖了解一下特朗普将被刻成冰雕',
          content: '特朗普将被刻成冰雕，环保组织：气候变暖了解一下,特朗普将被刻成冰雕，环保组织：气候变暖了解一下特朗普将被刻成冰雕，环保组织：气候变暖了解一下,特朗普将被刻成冰雕，环保组织：气候变暖了解一下特朗普将被刻成冰雕，环保组织：气候变暖了解一下,特朗普将被刻成冰雕，环保组织：气候变暖了解一下',
          source: '百度百家'
        }, {
          id: 222,
          name: '测试员2',
          time: '2018.05.03 11:34',
          title: '特朗普将被刻成冰雕，环保组织：气候变暖了解一下特朗普将被刻成冰雕',
          content: '特朗普将被刻成冰雕，环保组织：气候变暖了解一下,特朗普将被刻成冰雕，环保组织：气候变暖了解一下特朗普将被刻成冰雕，环保组织：气候变暖了解一下,特朗普将被刻成冰雕，环保组织：气候变暖了解一下特朗普将被刻成冰雕，环保组织：气候变暖了解一下,特朗普将被刻成冰雕，环保组织：气候变暖了解一下',
          source: '百度百家'
        }, {
          id: 333,
          name: '测试员3',
          time: '2018.05.03 11:34',
          title: '特朗普将被刻成冰雕，环保组织：气候变暖了解一下特朗普将被刻成冰雕',
          content: '特朗普将被刻成冰雕，环保组织：气候变暖了解一下,特朗普将被刻成冰雕，环保组织：气候变暖了解一下特朗普将被刻成冰雕，环保组织：气候变暖了解一下,特朗普将被刻成冰雕，环保组织：气候变暖了解一下特朗普将被刻成冰雕，环保组织：气候变暖了解一下,特朗普将被刻成冰雕，环保组织：气候变暖了解一下',
          source: '百度百家'
        }, {
          id: 444,
          name: '测试员4',
          time: '2018.05.03 11:34',
          title: '特朗普将被刻成冰雕，环保组织：气候变暖了解一下特朗普将被刻成冰雕',
          content: '特朗普将被刻成冰雕，环保组织：气候变暖了解一下,特朗普将被刻成冰雕，环保组织：气候变暖了解一下特朗普将被刻成冰雕，环保组织：气候变暖了解一下,特朗普将被刻成冰雕，环保组织：气候变暖了解一下特朗普将被刻成冰雕，环保组织：气候变暖了解一下,特朗普将被刻成冰雕，环保组织：气候变暖了解一下',
          source: '百度百家'
        }]
      }
    },
    mounted() {
      this.actions = [{
        name: '收藏时间升序',
        method: this.picture
      }, {
        name: '收藏时间降序',
        method: this.picture
      }]
    },
    methods: {
      openSort() {
        this.sheetVisible = true;
      },
      picture() {
        MessageBox.alert('敬请期待', '提示');
      },
      exit() {
        this.isExit = !this.isExit;
        this.isShow = !this.isShow;
        if (this.exitData == '编辑') {
          this.exitData = '取消编辑'
        } else {
          this.exitData = '编辑'
        }
      },
      batchDelete() {
        if(this.checkName.length == 0){
          MessageBox.alert('请选择要删除的项', '提示');
          return false
        }
        for (let i = 0; i < this.checkName.length; i++) {
          for (let j = 0; j < this.likeList.length; j++) {
            if(this.checkName[i] == this.likeList[j].id){
              this.likeList.splice(j,1)
            }
          }
        }
      },
      allDelete() {
        let that = this;
        that.checkName = [];
        that.likeList.forEach(function (item) {
          that.checkName.push(item.id)
        });
        MessageBox.confirm('确定删除全部?', '提示').then(action => {
          if (action == 'confirm') {
            that.likeList = [];
          }
        }).catch(error => {
          if (error == 'cancel') {
            that.checkName = [];
            return false
          }
        });
      }
    }
  }
</script>

<style lang="less">
  .like-title {
    position: fixed;
    top: 0;
    margin: auto;
    width: 750px;
    height: 88px;
    background-color: #05469b;
    z-index: 2000;
    .like-title-flex {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #fff;
      font-size: 30px; /*px*/
      p {
        margin-right: 32px;
      }
      a {
        padding-left: 32px;
      }
      span {
        flex: 1;
        text-align: center;
        font-size: 36px; /*px*/
      }
    }
  }

  .like-list {
    margin: 117px 13px 0 13px;
    padding-bottom: 111px;
    transition: all .4s ease;
    li {
      position: relative;
      background-color: #fff;
      border-radius: 8px;
      margin-bottom: 24px;
      box-shadow: 0 0 10px rgba(8, 41, 85, 0.12);
      .circle {
        position: absolute;
        top: 50%;
        left: -66px;
        transform: translateY(-50%);
        overflow: hidden;
        .circle-input {
          display: none;
        }
        .circle-core {
          display: inline-block;
          position: relative;
          width: 42px;
          height: 42px;
          border-radius: 100%;
          border: 4px solid #f7701e;
        }
        .circle-input:checked + .circle-core {
          background-color: #f7701e;
          &::after {
            border-color: #fff;
            transform: rotate(45deg) scale(1);
          }
        }
        .circle-core::after {
          border: 4px solid #fff;
          border-left: 0;
          border-top: 0;
          content: "";
          position: absolute;
          width: 12px;
          height: 24px;
          top: 4px;
          left: 14px;
          transform: rotate(45deg) scale(0);
          transition: transform 0.2s;
        }
      }
      .like-user {
        display: flex;
        overflow: hidden;
        padding: 20px 15px 20px 15px;
        .user-logo {
          width: 78px;
          height: 78px;
          background: url("../../assets/monitor/default_head@2x.png") no-repeat center;
          background-size: 78px 78px;
        }
        .user-name {
          display: flex;
          justify-content: center;
          flex-direction: column;
          padding-left: 15px;
          span {
            font-size: 30px; /*px*/
            color: #0c0c0c;
          }
          p {
            font-size: 24px; /*px*/
            color: #999;
          }
        }
      }
      .user-title {
        text-align: justify;
        font-size: 34px; /*px*/
        color: #222;
        padding: 0 15px 24px 15px;
      }
      .user-information {
        text-align: justify;
        color: #888;
        line-height: 42px;
        padding: 25px 15px;
        background-color: #f7f7f7;
      }
      .user-source {
        padding-left: 15px;
        line-height: 74px;
        font-size: 24px; /*px*/
        color: #c5c4c4;
      }
    }
  }

  .like-sort {
    position: fixed;
    bottom: 0;
    margin: auto;
    width: 750px;
    height: 82px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    font-size: 30px; /*px*/
    color: #0c0c0c;
    z-index: 300;
    box-shadow: 0 -2px 6px rgba(8, 41, 85, 0.08);
  }

  .like-sort i {
    display: inline-block;
    width: 40px;
    height: 24px;
    background: url("../../assets/monitor/directory_rank@2x.png") no-repeat center;
    background-size: 40px 24px;
  }

  .like-all .mint-actionsheet {
    width: 686px;
    background-color: rgba(0, 0, 0, 0.01);
    .mint-actionsheet-list {
      margin-bottom: 27px !important;
      .mint-actionsheet-listitem {
        line-height: 92px;
        font-size: 30px; /*px*/
        color: #0c0c0c;
        border-bottom: 1px solid #dbd9d9; /*no*/
      }
    }
    .mint-actionsheet-list li:first-of-type {
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
      height: 92px;
    }
    .mint-actionsheet-list li:last-of-type {
      border-bottom-left-radius: 8px;
      border-bottom-right-radius: 8px;
      height: 92px;
    }
    .mint-actionsheet-button {
      height: 92px;
      line-height: 92px;
      font-size: 32px; /*px*/
      color: #05469b;
      margin-bottom: 30px;
      border-radius: 8px;
    }
  }

  .like-all .mint-msgbox {
    font-size: 32px; /*px*/
  }

  .ul-margin {
    padding-left: 75px;
  }

  .like-exit {
    position: fixed;
    bottom: 0;
    margin: auto;
    width: 750px;
    height: 128px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    font-size: 30px; /*px*/
    color: #0c0c0c;
    z-index: 400;
    box-shadow: 0 -2px 6px rgba(8, 41, 85, 0.08);
    div {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 260px;
      height: 80px;
      font-size: 32px; /*px*/
      color: #fff;
      border-radius: 8px;
      margin: 0 32px;
    }
  }
</style>
